import React from 'react';
import { AutoComplete, Card } from 'antd';
import { Form, Input, Button, Checkbox, message } from 'antd';
import axios from 'axios';
const formItemLayout = {
    labelCol: {
        xs: { span: 24 },
        sm: { span: 8 },
    },
    wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
    },
};
const tailFormItemLayout = {
    wrapperCol: {
        xs: {
            span: 24,
            offset: 0,
        },
        sm: {
            span: 16,
            offset: 8,
        },
    },
};

export class Login extends React.Component {
    onFinish = (values) => {
        //get the information to backend 
        axios.get('http://localhost:8080/api/user/login'+"?"+"userId="+values.username+"&"+"password="+values.password)
            .then((response) => {
                if (response.data.success === false) {
                    message.error(response.data.errorMessage);
                } else {            
                    message.success('Login succeed');
                    localStorage.setItem("user",JSON.stringify(response.data.data))
                    setTimeout(()=>{
                        window.location.href="/#/home";
                    }, 500);
                }
            })
            .catch((error) => {
                message.error("Network Error");
            });
    };

    onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    }
    render = () => {
        return (
            <div style={{ width: '100vw', display: 'flex', justifyContent: 'center' }} >
                <Card title="Login" extra={<a href="/#/register">Register</a>} style={{ width: 450, marginTop: 85 }}>
                    <Form
                        {...formItemLayout}
                        name="basic"
                        // labelCol={{ span: 8 }}
                        // wrapperCol={{ span: 16 }}
                        initialValues={{ remember: true }}
                        onFinish={this.onFinish}
                        onFinishFailed={this.onFinishFailed}
                    >
                        <Form.Item
                            label="Username"
                            name="username"
                            rules={[{ required: true, message: 'Please input your username!' }]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            label="Password"
                            name="password"
                            rules={[{ required: true, message: 'Please input your password!' }]}
                        >
                            <Input.Password />
                        </Form.Item>

                        <Form.Item name="remember" valuePropName="checked" wrapperCol={{ offset: 8, span: 16 }}>
                            <Checkbox>Remember me</Checkbox>
                        </Form.Item>

                        <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                            <Button type="primary" htmlType="submit">
                                Submit
                            </Button>
                        </Form.Item>
                    </Form>
                </Card>
            </div>
        )

    }
}

